<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="__PUBLIC__/mobile/css/login.css">

	<link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css" media="all"/>
	<script type="text/javascript" src="__PUBLIC__/layui.js"></script>
	<script src="__PUBLIC__/mobile/js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<style type="text/css">
		.sendcode{
    position: absolute;
    width: 100px !important;
    right: 0;
    top: 0;
    text-align: center;
    padding: 0 !important;
    background-color: #F0093C;
    color: #fff;
    border-radius: 5px !important;
    cursor:pointer;
		}
	</style>
</head>
<body>
	<header class="nav">
	    <a class="nav-return" href="{:U('mobile/dzp/dzpp')}"></a>
	    <h1 class="nav-title">手机验证</h1>
	    <span class="nav-right">
	        <a class="nav-btn-reg" href="{:U('mobile/dzp/dzpp')}">返回</a>
	    </span>
	</header>
	
	<section class="main">
	    <div class="logo">
	        <img width="100%" height="100%" class="logo" src="__PUBLIC__/mobile/dzp/images/top.png" style="margin: 0px;">
	    </div>
      <div style="height:10px;text-align: center;">
          <span style="font-size: 16px;color: #5D0107;font-weight: bold;">抽奖手机验证</span>
      </div>
	    <form class="form layui-form" method="post">
            <div class="input-wrap">
	            <i class="i-pho"></i>
	            <input type="tel" class="tel" required  lay-verify="required" name="phone" value="" placeholder="请输入手机号">
	            <i class="i-close"></i>
	        </div>
			    <div class="input-wrap p-code">
	            <i class="i-code"></i>
	            <input class="code" name="send_to" required  lay-verify="required" placeholder="请输入验证码" type="text">
	            <i class="i-close"></i>
	            <input class="sendcode" id="getcodes" value="获取验证码" type="button" onclick="get_mobile_valid()">
	        </div>
	        <p class="protocol" style="color: #f90;">温馨提示：验证码有效期为2分钟，请及时填写</p>
			    <button class="btn-submit" style="margin-top: 20px;background: #F0093C;border: 0px;" lay-submit lay-filter="*">立即验证</button>
	    </form>
	    <p class="protocol"></p>
	</section>
<script type="text/javascript">
    layui.use(['form','layer'], function(){
      var layer = layui.layer
      ,form = layui.form();
      //layer.msg('Hello World');

    form.on('submit(*)', function(data){
      //console.log(data);
    $.ajax({
        url: "{:U('mobile/dzp/tj')}",//请求地址
        type: "post",//请求方式
        dataType: "json",//返回数据类型
        data: data.field,//发送的参数
        })
        .done(function(response) {
              if(response.error==0){
                 layer.msg(response.info ,{icon:5});

              }else{
                 layer.msg(response.info ,{icon:6});
                 location.href = "{:U('mobile/dzp/dzpp')}"

              }
          })
        .fail(function() {
            alert("ajxs交互失败");
        })  

      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });   
    });

    /*发送短信验证码*/
    function get_mobile_valid(){
        layer.confirm('确认要发送吗？',function(index){
            //发异步删除数据
            var to = $('input[name="phone"]').val();
            $.ajax({
                url: "{:U('mobile/user/send_to')}",//请求地址
                type: "post",//请求方式
                dataType: "json",//返回数据类型
                data: {to:to},//发送的参数
                })
                .done(function(response) {
                      if(response.error==1){
                        layer.msg(response.info ,{icon:6});
                      }else{
                        layer.msg(response.info ,{icon:5});
                      }
                  })
                .fail(function() {
                    alert("ajxs交互失败");
                })  
            return false;
        });
    }
</script>
</body>
</html>